<template>
	<div id="video-api">
		<div class="box1">
			<el-button icon="el-icon-plus" size="mini" type="primary" @click="add">添加</el-button>
			<div class="test">
				<div>测试连接:</div>
				<el-input v-model="testUrl" size="mini" class="inp"></el-input>
			</div>
		</div>
		<el-table :data="arr" style="width: 100%" border>
			<el-table-column prop="id" label="id" align="center" width="60"></el-table-column>
			<el-table-column label="启用" width="70" align="center">
				<template slot-scope="scope">
					<el-switch v-model="scope.row.enable" active-color="#13ce66" @change="changeEnable(scope.row)" inactive-color="#ff4949"></el-switch>
				</template>
			</el-table-column>
			<el-table-column prop="desc" label="描述" align="center" width="200"></el-table-column>
			<el-table-column label="接口" prop="api" align="center"></el-table-column>
			<el-table-column label="创建时间" width="180" align="center">
				<template slot-scope="scope">
					{{ scope.row.createTime | DF }}
				</template>
			</el-table-column>

			<el-table-column label="修改时间" width="180" align="center">
				<template slot-scope="scope">
					{{ scope.row.updateTime | DF }}
				</template>
			</el-table-column>
			<el-table-column label="操作" width="220" align="center">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" @click="edit(scope.row)">修改</el-button>
					<el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
					<el-button type="warning" size="mini" @click="test(scope.row.api)">测试</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog title="修改" :visible.sync="showDialogEdit">
			<el-form>
				<el-form-item label="id:">
					<span>{{ obj.id }}</span>
				</el-form-item>
				<el-form-item label="描述"><el-input v-model="obj.desc"></el-input></el-form-item>
				<el-form-item label="api"><el-input v-model="obj.api"></el-input></el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="showDialogEdit = false">取 消</el-button>
				<el-button type="primary" @click="submitEdit">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog title="添加" :visible.sync="showDialogAdd">
			<el-form :model="form" ref="dialogAdd">
				<el-form-item label="描述" prop="desc"><el-input v-model="form.desc"></el-input></el-form-item>
				<el-form-item label="api" prop="api"><el-input v-model="form.api"></el-input></el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="showDialogAdd = false">取 消</el-button>
				<el-button type="primary" @click="submitAdd">添 加</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { parseTime } from '@/utils/index.js';
import {$get,$post} from '@/puigins/request.js'

export default {
	name: 'VideoApi',
	data() {
		return {
			arr: [],
			testUrl: 'https://www.iqiyi.com/v_zgx3uhp28c.html?vfm=2008_aldbd&fv=p_02_01',
			showDialogEdit: false,
			showDialogAdd: false,
			obj: {},
			form: {
				desc: '',
				api: ''
			}
		};
	},
	filters: {
		DF(t) {
			return parseTime(t);
		}
	},
	created() {
		this.getData();
	},
	methods: {
		del(id) {
			this.$confirm('确定删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					$post('/admin/nav/video/delete', { id }).then(res => {
						if (res.code == 200) {
							this.arr = [];
							this.$message.success('删除成功');
							this.getData();
						} else {
							this.$message.error(res.data);
							console.log(res);
						}
					});
				})
				.catch(() => {});
		},
		add() {
			this.showDialogAdd = true;
			this.form = {
				desc: '',
				api: ''
			};
		},
		submitAdd() {
			if (this.form.api.indexOf('${url}') == -1) {
				return this.$message.warning('api格式不合法');
			}
			if (this.form.desc.trim() == '') {
				return this.$message.warning('请输入描述信息');
			}
			$post('/admin/nav/video/addVideoApi', this.form).then(res => {
				this.showDialogAdd = false;
				if (res.code == 200) {
					this.arr = [];
					this.$message.success('添加成功');
					this.getData();
				} else {
					this.$message.error(res.data);
					console.log(res);
				}
			});
		},
		getData() {
			$get('/admin/nav/video/getVideoApiList').then(res => {
				if (res.code == 200) {
					this.arr = res.data;
				} else {
					this.$message.error(res.data);
					console.log(res);
				}
			});
		},
		test(api) {
			if (api.indexOf('${url}') === -1) {
				return this.$message.warning('api格式不合法');
			}
			let url = api.replace('${url}', this.testUrl);
			window.open(url);
		},
		edit(obj) {
			this.obj = {
				id: obj.id,
				desc: obj.desc,
				api: obj.api
			};
			this.showDialogEdit = true;
		},
		submitEdit() {
			$post('/admin/nav/video/update', this.obj).then(res => {
				this.showDialogEdit = false;
				if (res.code == 200) {
					this.arr = [];
					this.$message.success('修改成功');
					this.getData();
				} else {
					this.$message.error(res.data);
					console.log(res);
				}
			});
		},
		changeEnable(obj) {
			$post('/admin/nav/video/changeEnable', { id: obj.id, enable: obj.enable }).then(res => {
				if (res.code == 200) {
					this.$message.success('修改成功');
				} else {
					this.$msgError(res);
				}
			});
		}
	}
};
</script>

<style lang="scss">
#video-api {
	padding: 30px;

	.box1 {
		display: flex;
		gap: 20px;
		padding: 0 0 20px 0;
		justify-content: space-between;

		.test {
			display: flex;
			align-items: center;
		}

		.inp {
			width: 200px;
			margin-left: 10px;
		}
	}
}
</style>
